import { forEach } from 'lodash-es';
/**
 * 将各个组件属性中的 px 改为 vw ，为了兼容各个手机尺寸
 * 因为画布是按照宽度 375px 计算的
 */
export function px2vw(components: any = []) {
	const reg = /^(\d+(\.\d+)?)px$/; // 验证格式 '10px' '9.5px'
	// 遍历组件
	components.forEach((component: any = {}) => {
		const props = component.props || {};
		// 遍历一个组件的属性
		forEach(props, (val: string, key: string) => {
			if (typeof val !== 'string' || !reg.test(val)) return;
			const arr = val.match(reg) || []; // 如 ["9.5px", "9.5", ".5", index: 0, input: "10px"]
			const numStr = arr[1];
			const num = parseFloat(numStr);
			// 计算出 vw ，重新赋值
			const vwNum = (num / (375 / 100)).toFixed(3); // 画布宽度是375px ，这样计算出 vw
			props[key] = `${vwNum}vw`;
		});
	});
}
